import React, { useEffect, useState, useRef } from 'react'
import { PlusOutlined } from '@ant-design/icons'
import { regionData } from '../utils/region'
import {
  Button,
  Col,
  Flex,
  Form,
  Input,
  Row,
  Select,
  Typography,
  DatePicker,
  Table,
  Alert,
  Cascader,
  Switch,
  Modal,
  Radio,
  message
} from 'antd'
import { shopDel, shopList, shopEdit } from '../service/shop'
import ImageUpload from '../components/ImageUpload'
import MyDatePicker from '../components/MyDatePicker'
import ManyUpload from '../components/ManyUpload'
import { Link, useNavigate } from 'react-router-dom'
// import { useState, useRef, useEffect } from 'react'

export default function ShopList() {
  const navigate = useNavigate()
  // 保存门店照片
  const [fileList, setFileList] = useState([])
  // 保存选择的日期
  const [selectedDateString, setSelectedDateString] = useState(null)
  // 保存店铺列表
  const [storeList, setStoreList] = useState([])
  // 保存页码
  const [pageNo, setPageNo] = useState(1)
  // 总数据量
  const [total, setTotal] = useState(0)
  // 预设日期
  // 保存表格中选中的项
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 表格中是否有选中
  const hasSelected = selectedRowKeys.length > 0
  // 获取省市区选中的值
  const regionChange = (value) => {
    console.log(value)
  }
  // 创建表单的引用
  const formRef = useRef()
  // 模态框
  const [isModalOpen, setIsModalOpen] = useState(false)

  // 保存图像上传
  const [imageLogo, setImageLogo] = useState()
  // 搜索条件
  const [condition, setCondition] = useState({})
  // 用于更新列表
  const [n, setN] = useState(1)
  const request = async () => {
    const res = await shopList({
      ...condition,
      pageNo,
      pageSize: 10
    })
    console.log(res)
    setStoreList(res.data.objects)
    setTotal(res.data.total)
  }
  useEffect(() => {
    request()
  }, [n, pageNo])

  return (
      <>
        <Row className="info">
          <Col span={24}>
            <Flex justify={'space-between'}>
              <Typography.Title level={3}>信息管理</Typography.Title>
              <Button
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={() => navigate('/admin/shop/add')}
                  // onClick={() => setIsModalOpen(true)}
              >
                新建门店
              </Button>
            </Flex>
          </Col>
        </Row>
        <Row className="container">
          <Col span={24}>
            <Form
                // layout="inline"
                onFinish={async (values) => {
                  // if (selectedDate) {
                  //   values.startingTime = selectedDateString[0] + ' 0:0:0'
                  //   values.endTime = selectedDateString[1] + ' 23:59:59'
                  // }
                  setCondition(values)
                  console.log(values)
                  await request()
                  setN(n + 1)
                }}
            >
              <Row>
                <Col span={8} className="myinput">
                  <Form.Item label="门店名称：" name="storeName">
                    <Input placeholder="请输入门店名称" />
                  </Form.Item>
                </Col>
                <Col span={8} className="myinput">
                  <Form.Item label="负责人联系方式：" name="storeHeadPhone">
                    <Input type="phone" placeholder="请输入联系方式" />
                  </Form.Item>
                </Col>
                <Col span={8} className="myinput">
                  <Form.Item label="区域选择：" name="storeAddress">
                    <Cascader
                        options={regionData}
                        onChange={regionChange}
                        placeholder="请选择查询的省/市/区县"
                        style={{ width: 280 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
              <Row>
                <Col span={5} className="myinput">
                  <Form.Item label="入驻日期">
                    <MyDatePicker
                        selectedDateString={selectedDateString}
                        setSelectedDateString={setSelectedDateString}
                    />
                  </Form.Item>
                </Col>
                <Col span={6} className="myinput">
                  <Form.Item label="门店状态" initialValue={'0'}>
                    <Select
                        placeholder="请选择门店状态"
                        options={[
                          {
                            value: '',
                            label: '全部'
                          },
                          {
                            value: '0',
                            label: '启用'
                          },
                          {
                            value: '1',
                            label: '停用'
                          }
                        ]}
                    />
                  </Form.Item>
                </Col>
                <Col span={2} className="myinput">
                  <Form.Item>
                    <Button type="default" htmlType="reset">
                      重置
                    </Button>
                  </Form.Item>
                </Col>
                <Col span={1} className="myinput">
                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      查询
                    </Button>
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Col>
        </Row>
        <Row className="container">
          <Col span={24}>
            <Typography.Paragraph style={{ fontSize: 16 }}>
              店铺列表
            </Typography.Paragraph>
            {hasSelected && (
                <Alert
                    message={`已经选择 ${selectedRowKeys.length} 项`}
                    type="info"
                    showIcon
                />
            )}
          </Col>
          <Col span={24}>
            <Table
                pagination={{
                  total,
                  defaultCurrent: 1,
                  onChange: async (page) => {
                    setPageNo(page)
                  }
                }}
                rowKey="id"
                rowSelection={{
                  selectedRowKeys,
                  onChange: (newSelectedRowKeys) => {
                    console.log('selectedRowKeys changed: ', newSelectedRowKeys)
                    setSelectedRowKeys(newSelectedRowKeys)
                  }
                }}
                dataSource={storeList}
                columns={[
                  {
                    title: '编号',
                    dataIndex: 'id',
                    key: 'id'
                  },
                  {
                    title: '门店名称',
                    dataIndex: 'storeName',
                    key: 'storeName'
                  },
                  {
                    title: '商家地址',
                    dataIndex: 'storeLocation',
                    key: 'storeLocation'
                  },
                  {
                    title: '门店电话',
                    dataIndex: 'storePhone',
                    key: 'storePhone'
                  },
                  {
                    title: '负责人',
                    dataIndex: 'storeHeadName',
                    key: 'storeHeadName'
                  },
                  {
                    title: '联系电话',
                    dataIndex: 'storeHeadPhone',
                    key: 'storeHeadPhone'
                  },
                  {
                    title: '创建时间',
                    dataIndex: 'createTime',
                    key: 'createTime'
                  },
                  {
                    title: '更新时间',
                    dataIndex: 'updateTime',
                    key: 'updateTime'
                  },
                  {
                    title: '启用状态',
                    dataIndex: 'storeStatus',
                    key: 'storeStatus',
                    render: (_, record) => {
                      return (
                          <Switch
                              defaultChecked={record.storeStatus == 0}
                              onChange={async (value) => {
                                // 启用状态将后端改为0，停用状态将后端改为-1
                                const storeStatus = value ? 0 : -1
                                await shopEdit({ id: record.id, storeStatus })
                                if (value) {
                                  message.success('状态启用成功')
                                } else {
                                  message.success('状态停用')
                                }
                              }}
                          />
                      )
                    }
                  },
                    {
                        title: '操作',
                        dataIndex: 'op',
                        key: 'op',
                        align: 'center',
                        render: (_, record) => {
                            return (
                                <span className="op">
                      <Link to={`/admin/shop/edit/${record.id}`}>编辑</Link>
                      <a
                          onClick={async () => {
                              const updateData = {
                                  id: record.id,
                                  storeStatus: 2 //0为启用，1为关闭,2为删除
                              }
                              const res =await shopEdit(updateData)
                              //const res = await shopDel(record.id)
                              console.log(res)
                              if (res.code === '0') {
                                  message.success('删除成功')
                                  setN(n + 1)
                              }
                          }}
                      >
                        删除
                      </a>
                    </span>
                            )
                        }
                    }
                ]}
            />
          </Col>
        </Row>
        <Modal
            title="新建门店"
            open={isModalOpen}
            onOk={() => formRef.current.submit()}
            onCancel={() => setIsModalOpen(false)}
            maskClosable={false}
            width={750}
            destroyOnClose
        >
          <Form
              onFinish={async (v) => {
                console.log(v)
              }}
              layout="vertical"
              ref={formRef}
              // 当字段被删除时不保留字段值
              preserve={false}
          >
            <Row>
              <Col span={12}>
                <Form.Item
                    label="所属商家"
                    name="businessId"
                    rules={[
                      {
                        required: true,
                        message: '所属商家不能为空'
                      }
                    ]}
                >
                  <Select
                      placeholder="请选商家"
                      options={[
                        {
                          value: '1',
                          label: '餐饮'
                        },
                        {
                          value: '2',
                          label: '体育'
                        },
                        {
                          value: '3',
                          label: '娱乐'
                        }
                      ]}
                  />
                </Form.Item>
              </Col>
              <Col span={11} offset={1}>
                <Form.Item
                    label="门店名称"
                    name="businessName"
                    rules={[
                      {
                        required: true,
                        message: '门店名称不能为空'
                      }
                    ]}
                >
                  <Input placeholder="请输入门店名称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                    label="门店电话"
                    name="storePhone"
                    rules={[
                      {
                        required: true,
                        message: '所属商家不能为空'
                      }
                    ]}
                >
                  <Input placeholder="请输入门店名称" />
                </Form.Item>
              </Col>
              <Col span={11} offset={1}>
                <Form.Item
                    label="负责人"
                    name="storeHeadName"
                    rules={[
                      {
                        required: true,
                        message: '负责人不能为空'
                      }
                    ]}
                >
                  <Input placeholder="请输入负责人" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                    label="负责人电话"
                    name="storeHeadPhone"
                    rules={[
                      {
                        required: true,
                        message: '负责人电话不能为空'
                      }
                    ]}
                >
                  <Input placeholder="请输入负责人电话" />
                </Form.Item>
              </Col>

              <Col span={11} offset={1}>
                <Form.Item
                    label="门店地区"
                    name="storeAddress"
                    rules={[
                      {
                        required: true,
                        message: '门店地区不能为空'
                      }
                    ]}
                >
                  <Cascader
                      options={regionData}
                      onChange={regionChange}
                      placeholder="请选择查询的省/市/区县"
                      style={{ width: '100%' }}
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                    label="详细地址"
                    name="storeLocation"
                    rules={[
                      {
                        required: true,
                        message: '地址不能为空'
                      }
                    ]}
                >
                  <Input placeholder="请输入地址" value="中鼎大厦" />
                </Form.Item>
              </Col>
              <Col span={11} offset={1}>
                <Form.Item label="坐标" name="storeLongitude">
                  <Input value="坐标" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="门店照片" name="storeImagesId">
                  <ManyUpload fileList={fileList} setFileList={setFileList} />
                </Form.Item>
              </Col>
              <Col span={11} offset={1}>
                <Form.Item label="门店LOGO" name="storeLongitude">
                  <ImageUpload imageUrl={imageLogo} setImageUrl={setImageLogo} />
                </Form.Item>
              </Col>
              <Col span={24}>
                <Form.Item label="商家简介" name="storeIntroduction">
                  <Input.TextArea placeholder="请输入商家简介" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="排序" name="sort">
                  <Select
                      placeholder="请选择门店状态"
                      defaultValue={'1'}
                      options={[
                        {
                          value: '1',
                          label: '升序'
                        },
                        {
                          value: '2',
                          label: '降序'
                        }
                      ]}
                  />
                </Form.Item>
              </Col>
              <Col span={11} offset={1}>
                <Form.Item label="门店状态" name="storeStatus">
                  <Radio.Group name="radioGroup" defaultValue={1}>
                    <Radio value={1}>开启</Radio>
                    <Radio value={0}>禁用</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </Modal>
      </>
  )
}
